<template>
  <div class="notice-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.workId"
          placeholder="工号"
          style="width: 120px"
          class="filter-item"
          clearable
        />
        <el-input
          v-model="filter.name"
          placeholder="姓名"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-input
          v-model="filter.title"
          placeholder="主题"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-select
          v-model="filter.status"
          placeholder="状态"
          style="width: 120px; margin-left: 10px"
          clearable
        >
          <el-option label="全部" value="" />
          <el-option label="通过" value="通过" />
          <el-option label="拒绝" value="拒绝" />
          <el-option label="待审核" value="待审核" />
        </el-select>
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="success" :disabled="selection.length === 0" @click="batchApprove">
          <span style="font-size: 16px">🔍</span> 通过
        </el-button>
        <el-button type="danger" style="margin-left: 15px" :disabled="selection.length === 0" @click="batchReject">
          <span style="font-size: 16px">✕</span> 拒绝
        </el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="title" label="主题" width="150"/>
        <el-table-column prop="workId" label="工号" width="100" align="center"/>
        <el-table-column prop="author" label="作者" width="120"/>
        <el-table-column prop="date" label="发帖时间" width="150"/>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.status)" size="small">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button 
              type="text" 
              size="mini" 
              @click="handleApprove(scope.row)"
              :disabled="scope.row.status === '通过'"
            >通过</el-button>
            <el-button 
              type="text" 
              size="mini" 
              @click="handleReject(scope.row)"
              :disabled="scope.row.status === '拒绝'"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="pagination-info">
        第 1 到 {{ filteredData.length }} 条，共 {{ filteredData.length }} 条记录。
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑通知" :visible.sync="editDialogVisible" width="50%">
      <el-form :model="currentNotice" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="currentNotice.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="主题" required>
          <el-input v-model="currentNotice.title"></el-input>
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="currentNotice.workId"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="currentNotice.author"></el-input>
        </el-form-item>
        <el-form-item label="发帖时间" required>
          <el-date-picker
            v-model="currentNotice.date"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="currentNotice.status" placeholder="请选择状态">
            <el-option label="通过" value="通过"></el-option>
            <el-option label="拒绝" value="拒绝"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        workId: '',
        name: '',
        title: '',
        status: ''
      },
      tableData: [
        {
          id: 7,
          title: '通知',
          workId: '1',
          author: 'admin',
          date: '2020-02-09',
          status: '通过'
        },
        {
          id: 8,
          title: '紧急通知',
          workId: '1',
          author: 'admin',
          date: '2020-05-12',
          status: '通过'
        },
        {
          id: 9,
          title: '系统维护',
          workId: '2',
          author: 'user1',
          date: '2020-06-15',
          status: '待审核'
        },
        {
          id: 10,
          title: '会议通知',
          workId: '3',
          author: 'user2',
          date: '2020-07-20',
          status: '拒绝'
        }
      ],
      selection: [], // 选中的行
      editDialogVisible: false,
      currentNotice: {} // 当前编辑的通知
    }
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        return (
          (this.filter.workId === '' || item.workId.includes(this.filter.workId)) &&
          (this.filter.name === '' || item.author.includes(this.filter.name)) &&
          (this.filter.title === '' || item.title.includes(this.filter.title)) &&
          (this.filter.status === '' || item.status === this.filter.status)
        )
      })
    }
  },
  methods: {
    // 获取状态标签类型
    getStatusTagType(status) {
      switch (status) {
        case '通过': return 'success'
        case '拒绝': return 'danger'
        case '待审核': return 'warning'
        default: return 'info'
      }
    },
    
    // 处理选中行变化
    handleSelectionChange(val) {
      this.selection = val
    },
    
    // 搜索
    handleSearch() {
      // 计算属性 filteredData 会自动更新
      this.$message.success('搜索完成')
    },
    
    // 重置搜索
    resetSearch() {
      this.filter = {
        workId: '',
        name: '',
        title: '',
        status: ''
      }
    },
    
    // 批量通过
    batchApprove() {
      this.selection.forEach(item => {
        item.status = '通过'
      })
      this.$message.success(`已通过 ${this.selection.length} 条通知`)
      this.selection = []
    },
    
    // 批量拒绝
    batchReject() {
      this.selection.forEach(item => {
        item.status = '拒绝'
      })
      this.$message.success(`已拒绝 ${this.selection.length} 条通知`)
      this.selection = []
    },
    
    // 单个通过
    handleApprove(row) {
      row.status = '通过'
      this.$message.success('操作成功')
    },
    
    // 单个拒绝
    handleReject(row) {
      row.status = '拒绝'
      this.$message.success('操作成功')
    },
    
    // 编辑
    handleEdit(row) {
      this.currentNotice = JSON.parse(JSON.stringify(row)) // 深拷贝
      this.editDialogVisible = true
    },
    
    // 保存编辑
    saveEdit() {
      const index = this.tableData.findIndex(item => item.id === this.currentNotice.id)
      if (index !== -1) {
        this.tableData.splice(index, 1, this.currentNotice)
        this.$message.success('编辑成功')
      }
      this.editDialogVisible = false
    }
  }
}
</script>

<style scoped>
.notice-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  margin: 15px 0 20px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: right;
  padding-right: 20px;
}

.el-button--text {
  padding: 0 5px;
}

/* 复选框样式 */
.el-table__header .el-checkbox__inner {
  border-radius: 2px;
  border-color: #DCDFE6;
}

/* 符号按钮样式 */
.el-button [class*=el-icon-] {
  vertical-align: -0.1em;
}
</style>